<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
            margin: 0 auto;
        }
        table, td, th {
            border: 1px solid #333;
        }
        td, th {
            padding: 2px 50px;
            text-align: center;
        }
        
    </style>
    <script>
        window.onload = function(){
            var list = [
            { id: 1, name: '风扇', price: '99', num: 2 },
            { id: 2, name: '电脑', price: '1999', num: 1 },
            { id: 3, name: '项链', price: '2', num: 100 }
        ]
        var table = document.createElement("table");
        /*输入头部*/
        var thead = document.createElement("thead");
        var tr = document.createElement("tr");
        for(var key in list[0]){
            var th = document.createElement("th");
            th.innerHTML = key ;
            tr.appendChild(th);
        }
        thead.appendChild(tr);
        table.appendChild(thead);
        /* 输入tbody */
        var tbody = document.createElement("tbody");
        for(var i = 0; i < list.length;i++){
            var tr = document.createElement("tr");
            for(var key in list[i]){
            var td = document.createElement("td");
            td.innerHTML = list[i][key] ;
            tr.appendChild(td);
            thead.appendChild(tr);
        }
        table.appendChild(tbody);

        }
        document.body.appendChild(table);
        }
    </script>
</head>
<body>
    
</body>
</html>